---
title: An exquisite React photo preview component
---

import { Callout } from 'nextra/components';
import { Bleed } from 'nextra-theme-docs';
import Features from '../components/features';

import Index from '../components/doc-index';

<h1 className="text-center font-bold md:text-5xl mt-8">react-photo-view</h1>

<Bleed>
  <Features />
</Bleed>

`react-photo-view` has an unparalleled preview interaction experience: starting from the opening of the image, the animation, details and interaction of each frame have been carefully designed and repeatedly debugged, which is comparable to the effect of native image preview.

<div className="mt-16 mb-20 text-center">
  [Getting Started](/docs/getting-started) · [API](/docs/api) ·
  [GitHub](https://github.com/MinJieLiu/react-photo-view.git)
</div>

<Index />

## Overview

```jsx
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

export default function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}
```

In this example, `react-photo-view` provides two components: `PhotoProvider` and `PhotoView`. With the `PhotoProvider` as the boundary, all the `PhotoView` images in it will be extracted as a set of image preview galleries in the running order. When an `<img >` is clicked, it will locate the specified image and open the preview.

## features

It has very perfect details and features:

- Support touch gestures, drag and pan physical effect sliding, two-finger specified position to zoom in and out
- All aspects of animation connection, open and close the rebound touch edge, let the natural interaction effect
- The image is adaptive, with a suitable initial rendering size, and adapts according to the adjustment
- Support for custom previews like `<video>` or any `HTML` element
- Keyboard navigation, perfect for desktop
- Support custom node expansion, easy to achieve full-screen preview, rotation control, picture introduction and more functions
- Based on `typescript`, `7KB Gzipped`, supports server-side rendering
- Simple and easy to use `API`, zero cost to get started

## About

<p className="flex flex-wrap mt-6">
  <img alt="stars" src="https://badgen.net/github/stars/MinJieLiu/react-photo-view" className="mr-2 mb-2" />
  <img alt="version" src="https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square" className="mr-2 mb-2" />
  <img
    alt="downloads"
    src="http://img.shields.io/npm/dm/react-photo-view.svg?style=flat-square"
    className="mr-2 mb-2"
  />
  <img alt="license" src="https://badgen.net/npm/license/react-photo-view" className="mr-2 mb-2" />
  <img alt="min" src="https://badgen.net/bundlephobia/min/react-photo-view?label=minified" className="mr-2 mb-2" />
  <img alt="gzip" src="https://badgen.net/bundlephobia/minzip/react-photo-view?label=gzip" className="mr-2 mb-2" />
</p>

`react-photo-view` created by [MinJieLiu](https:github.comMinJieLiu)

<Callout emoji="😄">
  <span>Click a Star to not get lost 👉 </span>
  <a className="inline-block underline" href="https://github.com/MinJieLiu/react-photo-view" target="_blank">
    Star
  </a>
  <span> Thanks for the support!</span>
</Callout>

- [GitHub](https://github.com/MinJieLiu)

## License

Apache-2.0 © [MinJieLiu](https://github.com/MinJieLiu)
